<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 标题 -->
    <title>会员系统</title>
    <!-- 关键词 -->
    <meta name="keywords" content="" />
    <!-- 网站简介 -->
    <meta name="description" content="" />
    <!-- 自适应屏幕 -->
    <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
      <!-- IE兼容 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 最新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="css/bootstrap.css">
    <!-- 手机滚动 css 文件 -->
    <link href="css/mobiscroll.core-2.5.2.css" rel="stylesheet" type="text/css" />
    <!-- 开关 CSS 文件 -->
    <link rel="stylesheet" href="css/switch.css">
    <!-- 核心 CSS 文件 -->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="member-wrap clearfix">
         <!-- 左侧导航 -->
         <div class="nav-left" >
            <div class="black-bg"></div>
            <ul>
                <li class="user-info"> 
                    <a href="">
                       <img src="images/user1.png" alt="" >
                       <p>Admin</p>
                    </a>
                </li>
                <li >
                    <a href="index.html">
                       <img src="images/icon1.png" alt="" style="width:25px">
                       <p>会员卡</p>
                    </a>
                </li>
                <li class="active">
                    <a href="charge.html">
                       <img src="images/icon2.png" alt="" style="width:26px">
                       <p>充值</p>
                    </a>
                </li>
                <li >
                    <a href="report.html">
                       <img src="images/icon3.png" alt="" style="width:25px">
                       <p>报表</p>
                    </a>
                </li>
                <li>
                    <a href="integral.html">
                       <img src="images/icon4.png" alt="" style="width:25px">
                       <p>积分兑换</p>
                    </a>
                </li>
                <li >
                    <a href="setting.html">
                       <img src="images/icon5.png" alt="" style="width:30px">
                       <p>设置</p>
                    </a>
                </li>
            </ul>
        </div>
        
        <!-- 右侧内容 -->
        <div class="member-main" >
            <!-- 顶部导航 -->
            <div class="nav-top clearfix">
                <a href="" class="left">
                   <img src="images/arrow-left.png" alt="">
                </a>
                <span>会员系统</span>
                <a href="" class="right">
                    <img src="images/help.png" alt="">
                </a>
            </div>
            <div class="member-content clearfix">
                <div class="member-content-left" id="mleft">
                    <div class="member-left-top">
                        <h4>发卡</h4>
                    </div>
                    <div class="member-left-bottom">
                        <div class="member-lg-top">
                            默认发“火小二”电子卡，打开绑定ID/IC卡时可发实物卡
                        </div>
                        <ul class="chongzhi-a member-lg-phone" style="margin-top:10px">
                            <li class="member-lg-dianhua clearfix" >
                                <div class="left">会员手机号码</div>
                                <div class="right"><input type="text" data-target="#txphone" data-toggle="modal" placeholder="必填" value=""></div>
                            </li>
                            <li class="member-lg-cart clearfix">
                                <div class="left">选择要发的卡</div>
                                <div class="right">
                                    <select name="" id="member-lg-cart" data-role="none" value="">
                                        <option value="请选择">请选择</option>
                                        <option value="福利卡">福利卡</option>
                                        <option value="万里卡">万里卡</option>
                                    </select>
                                </div>
                            </li>
                            <li class="clearfix">
                                <div class="left">需要设置卡密码</div>
                                <div class="right"><input type="checkbox" name="my-checkbox" checked data-size="mini"></div>
                            </li>
                            <li class="clearfix">
                                <div class="left">打发发卡凭证</div>
                                <div class="right"><input type="checkbox" name="my-checkbox" checked data-size="mini"></div>
                            </li>
                        </ul>
                        <div class="member-lg-d clearfix">
                            <a href="">充值与积分</a>
                            <a href="">填写会员资料</a>
                        </div>
                        <div class="member-lg-center">
                            <p>发卡通知短信预览</p>
                            <textarea type="textarea">您已成功领取万利卡，安装“火小二”应用即可使用。下 载地址：http://t.cn/8FUlluk。【渔人码头】
                            </textarea>
                            <div class="clearfix member-lg-e">
                                <div class="left">还剩 <span class="yellow">0条</span> 发卡通知短信预览</div>
                                <div class="right">
                                    <a href="">短信充值</a>
                                </div>
                            </div>
                        </div>
                        <div class="member-lg-bottom">
                            <p>短信内容超过70个字将以两条发送，短信余额不足时也会发卡成功，但是会 员收不到通知短信。</p>
                            <div class="mamber-la-bottom clearfix">
                                <a href="">取消</a>
                                <a href="">确认</a>
                            </div>
                            
                        </div>
                    </div>
                </div>
                <div class="member-content-right" id="mright">
                    <div class="member-right-top clearfix">
                        <h4>填写会员资料</h4>
                    </div>
                    <div class="member-rg">
                        <div class="form-group clearfix">
                            <div class="left">
                                <label for="">姓名</label>
                            </div>
                            <div class="right">
                                <input type="text" class="form-control" placeholder="请填写真实姓名">
                            </div>
                        </div>
                        <div class="form-group clearfix">
                            <div class="left">
                                <label for="">手机</label>
                            </div>
                            <div class="right">
                                <input type="text" class="form-control">
                            </div>
                        </div>
                        <div class="form-group clearfix">
                            <div class="left">
                                <label for="">地址</label>
                            </div>
                            <div class="right">
                                <input type="text" class="form-control">
                            </div>
                        </div>
                        <div class="form-group clearfix">
                            <div class="left">
                                <label for="">生日</label>
                            </div>
                            <div class="right">
                                <input type="text" class="form-control" placeholder="格式如：1992-06-02">
                            </div>
                        </div>
                        <div class="form-group clearfix">
                            <div class="left">
                                <label for="">性别</label>
                            </div>
                            <div class="right">
                                <input type="text" class="form-control">
                            </div>
                        </div>
                        <div class="form-group clearfix">
                            <div class="left">
                                <label for="">密码</label>
                            </div>
                            <div class="right">
                                <input type="text" class="form-control" placeholder="要求数字字母下划线，6个字符以上">
                            </div>
                        </div>
                        <div class="form-group clearfix">
                            <div class="left">
                                <label for="">邮箱</label>
                            </div>
                            <div class="right">
                                <input type="text" class="form-control">
                            </div>
                        </div>
                        <div class="mamber-la-bottom clearfix">
                            <a href="">取消</a>
                            <a href="">确认</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div> 
   
   <!-- 填写手机号码 -->
    <div class="modal fade tanchukuang" id="txphone" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
        <div class="modal-dialog modal-sm">
            <div class="modal-content txphone">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">会员手机号码</h4>
                </div>
                <div class="modal-body">
                    <div class="txphone-a clearfix">
                        <div class="left">手机号码</div>
                        <div class="right"><input type="text" placeholder="必填" name="text1" class="shuru input_cur"></div>
                    </div>
                    <script src="js/keyboard.js"></script>
                    
                </div>
                <div class="modal-footer">
                    <input type="submit" data-dismiss="modal" value="取消">
                    <input type="submit" value="确认">
                </div>
            </div>
        </div>
    </div>
    
    <!-- jQuery文件 -->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>  
    <script src="js/switch.js"></script>  
    <script src="js/mobiscroll.core-2.5.2.js"></script>
    <script src="js/mobiscroll.select-2.5.1.js"></script>
    <script>
        function alignHeight(eleA,eleB){
          if(!document.getElementById(eleA)){return false;}
          if(!document.getElementById(eleB)){return false;}
          var heightA = document.getElementById(eleA).clientHeight;
          var heightB = document.getElementById(eleB).clientHeight;
          if(heightA > heightB){
            document.getElementById(eleB).style.height = heightA + "px";
            document.getElementById(eleA).style.height = heightA + "px";
          }else{
            document.getElementById(eleA).style.height = heightB + "px";
            document.getElementById(eleB).style.height = heightB + "px";
          }
        }
        window.onload =function z_align(){
            alignHeight("mleft","mright");   
        }
    </script> 

    <script>
        $("[name='my-checkbox']").bootstrapSwitch();
        $(function () {
            $('#member-lg-cart').scroller('destroy').scroller({ preset: 'select' });
        });
    </script>

</body>
</html>